import Taro, {Component} from "@tarojs/taro";
import {View, Image, Text} from "@tarojs/components";
import {inject, observer} from '@tarojs/mobx'
import {IStoreProps} from '../../store/Stores'
import {getRuntime, namePartOf, pageSize} from "../../utils/common";

import './creditCard.less'

import icon_86 from "../../assets/img/common/icon_86.png";
import noneIcon from "../../assets/img/common/none_card.png";

interface IHomeProps extends IStoreProps {}

@inject("stores")
@observer
class MineCard extends Component<IHomeProps> {
  constructor(props) {
    super(props)
  }

  state = {
    items: [],
    totalCount: 0,
    pageSize,
    pageIndex: 1,
  }

  componentWillMount() {
    Taro.setNavigationBarTitle({title: '智能还款'})
    this.creditCardGetCardList()
  }

  componentDidShow(): void {
    Taro.setNavigationBarTitle({title: '智能还款'})
  }

  link(url: string = '/pages/index/index'): void {
    getRuntime().navigateTo(url)
  }

  creditCardGetCardList() {
    let { pageIndex } = this.state
    let { cardStore } = this.props.stores
    cardStore.creditCardGetCardList({
      cardType: 1, // 1信用卡， 2储蓄卡
      pageIndex,
      pageSize,
      callback: res => {
        if (pageIndex === 1) {
          this.setState({totalCount: res.totalCount, items: res.items})
        }else {
          const { items } = this.state;
          items.push(...res.items || []);
          this.setState({totalCount: res.totalCount, items})
        }
      }
    })
  }

  onReachBottom(): void {
    let {totalCount, pageSize, pageIndex} = this.state
    const {loading} = this.props.stores.homeStore;
    if (totalCount > pageIndex * pageSize && !loading) {
      this.setState({
        pageIndex: pageIndex + 1
      }, () => {
        this.creditCardGetCardList()
      })
    }
  }

  render() {
    let { items } = this.state
    return (
      <View className='mine-credit'>
        {
          items.length>0&&
          <View className='list-10'>
            {
              items.map((item, index) => {

                return(
                  <View className={'list-10-item color'+index%4}>
                    <Image src={icon_86} className='img' />
                    <View className='info'>
                      <View className='top'>
                        <View className='list-title'>{item.bankname}({item.cardNo&&item.cardNo.substr(-4)})</View>
                        <View className='list-add' onClick={this.link.bind(this,'/pages/card/addPlay')}>+ 添加还款计划</View>
                        <View className='list-desc font-dark'>{item.cardTypeName} {namePartOf(item.realName)}</View>
                      </View>

                      <View className='bottom'>
                        <View className='bottom__item'>
                          <View className='bottom__title'>账单日期</View>
                          <View className='bottom__title'> <Text className='text fw'>{item.billDay}</Text> 日</View>
                        </View>
                        <View className='bottom__item'>
                          <View className='bottom__title'>还款日期</View>
                          <View className='bottom__title'> <Text className='text fw'>{item.repaymentDate}</Text>日 </View>
                        </View>
                        <View className='bottom__item'>
                          <View className='bottom__title'>本月已还</View>
                          <View className='bottom__title yuan fw'>66.66</View>
                        </View>
                      </View>
                    </View>
                  </View>
                )
              })
            }
             <View className='list-10-item color2'>
                <Image src={icon_86} className='img' />
                <View className='info'>
                  <View className='top'>
                     <View className='list-title'>建设银行(2655)</View>
                     <View className='list-add' onClick={this.link.bind(this,'/pages/card/addPlay')}>+ 添加还款计划</View>
                     <View className='list-desc font-dark'>储蓄卡 段*起</View>
                  </View>

                  <View className='bottom'>
                    <View className='bottom__item'>
                      <View className='bottom__title'>账单日期</View>
                      <View className='bottom__title'> <Text className='text fw'>14</Text> 日</View>
                    </View>
                     <View className='bottom__item'>
                        <View className='bottom__title'>还款日期</View>
                        <View className='bottom__title'> <Text className='text fw'>14</Text>日 </View>
                     </View>
                     <View className='bottom__item'>
                        <View className='bottom__title'>本月已还</View>
                        <View className='bottom__title yuan fw'>66.66</View>
                     </View>
                  </View>
                </View>
             </View>
          </View>
        }
        {
          items.length<=0&&
          <View className='none'>
             <Image className='none-icon' src={noneIcon} />
             <View className='none-title'>智能还款 手续费更低</View>
             <View className='none-tips'>绑定后可自动还款，定制还款计划！</View>
          </View>
        }
        <View className='footer-block' />
        <View className='page-submit' onClick={this.link.bind(this,'/pages/card/creditAdd')}>+ 添加信用卡</View>
      </View>
    )
  }
}

export default MineCard
